<template>
  <div class="box__">
    <el-form
      ref="formData"
      :rules="rules"
      :model="formData"
      :label-position="'left'"
    >
      <el-form-item label="直播标题" prop="name">
        <el-input
          placeholder="请输入直播标题"
          v-model="formData.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="直播时间" prop="time_">
        <el-date-picker
          v-model="formData.time_"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="直播类型" prop="type">
        <el-radio v-model="formData.type" label="KNOWLEDGE">知识</el-radio>
        <el-radio v-model="formData.type" label="GOODS">商品</el-radio>
      </el-form-item>
      <el-form-item label="关联栏目" prop="courseCategory">
        <div class="dp-ib">
          <div class="f-row ai-c" v-for="(i, k) in courseCategory" :key="k">
            <div class="title mr-1">
              {{ i.title }}
            </div>
            <div
              class="f-row ai-c"
              v-for="(item, key) in i.children"
              :key="key"
            >
              <div
                class="item mr-1"
                :class="{
                  activeItem: formData.courseCategory.includes(item.id),
                }"
                @click="handleCategory(item.id)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="直播描述" prop="roomDetail">
        <el-input
          type="textarea"
          placeholder="请输入直播内容"
          v-model="formData.roomDetail"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="isAgreeMent">
        <div class="f-row ai-c">
          <el-checkbox v-model="formData.isAgreeMent"> </el-checkbox>
          <div class="ml-1">
            <span>我已阅读并遵守</span>
            <span class="xieyi">《运动健康平台直播协议》</span>
          </div>
        </div>
      </el-form-item>
    </el-form>

    <div class="f-row ai-c">
      <div class="btn-light" @click="$router.go(-1)">返回</div>
      <div class="btn-deep" @click="submitForm('formData')">提交审核</div>
    </div>
  </div>
</template>

<script>
import { applyLive, curriculum_category } from "@/request/api";
export default {
  data() {
    var validatelanmu = (rule, value, callback) => {
      if (this.formData.courseCategory.length == 0) {
        callback(new Error("请选择关联栏目型"));
      } else {
        callback();
      }
    };
    var validateAgreeMent = (rule, value, callback) => {
      if (!this.formData.isAgreeMent) {
        callback(new Error("请勾选已阅读直播协议条款！"));
      } else {
        callback();
      }
    };
    return {
      courseCategory: [], //获取到栏目的数据
      formData: {
        isAgreeMent: false, //是否同意协议
        courseCategory: [], //栏目id
        time_: "",
        name: "",
        roomDetail: "",
        type: null,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入直播标题",
            trigger: "blur",
          },
        ],
        isAgreeMent: [
          {
            validator: validateAgreeMent,
            trigger: "blur",
          },
        ],
        time_: [
          {
            required: true,
            message: "请选择直播时间",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择直播类型",
            trigger: "blur",
          },
        ],
        courseCategory: [
          {
            required: true,
            validator: validatelanmu,
            trigger: "blur",
          },
        ],
        roomDetail: [
          {
            required: true,
            message: "请输入直播描述",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getCategory();
  },
  methods: {
    handleCategory(id) {
      if (this.formData.courseCategory.includes(id)) {
        this.formData.courseCategory = this.formData.courseCategory.filter(
          (i) => i != id
        );
      } else {
        this.formData.courseCategory.push(id);
      }
    },
    //获取课程管理栏目
    getCategory() {
      curriculum_category().then((res) => {
        for (const key in res.result) {
          if (Object.hasOwnProperty.call(res.result, key)) {
            res.result[key];
            let obj = {
              title: key,
              children: res.result[key],
            };
            this.courseCategory.push(obj);
            console.log(this.courseCategory, 887);
          }
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.sendRequest();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    sendRequest() {
      let [startTime, endTime] = this.formData.time_;
      applyLive({
        courseCategory: this.formData.courseCategory.toString(),
        endTime,
        name: this.formData.name,
        roomDetail: this.formData.roomDetail,
        startTime,
        type: this.formData.type,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "申请成功",
          });
          this.$router.go(-1);
        } else {
          this.$message.error("申请失败，请重试");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  cursor: pointer;
  border: 0.0625rem solid #e1e1e1;
  border-radius: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #63676e;
  padding: 0.5625rem 1.4375rem;
  height: 2rem;
  line-height: 2rem;
}
.title {
  font-size: 0.875rem;
  font-weight: bold;
  color: #52555a;
}
.activeItem {
  background: #f4333c !important;
  color: #fff !important;
}
.xieyi {
  color: var(--themeCOlor);
}
.box__ {
  width: 100%;
  min-height: calc(100vh - 17.5rem);
  box-sizing: border-box;
  position: relative;
  padding: 3.125rem;

  background-color: #fff;
}
.el-form {
  .el-input,
  .el-date-editor--timerange {
    width: 22.8125rem;
  }
  .el-textarea {
    width: 44.875rem;
    height: 10.5625rem;
    textarea {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>